<template>
    <div class="page1">
        <div class="banner">
            <!-- 这里是轮播图 -->
            <!-- <mt-swipe :auto="4000">
            <mt-swipe-item>
                <img src="@/images/banner_03.jpg"/>
            </mt-swipe-item>
            <mt-swipe-item></mt-swipe-item>
            <mt-swipe-item><img src="@/images/banner_06.jpg"/></mt-swipe-item>
            <mt-swipe-item><img src="@/images/banner_16.png"/></mt-swipe-item>
            </mt-swipe> -->
    <Swipe :auto="1000">
    <SwipeItem><img src="@/images/banner_05.jpg"/></SwipeItem>
    <SwipeItem><img src="@/images/banner_03.jpg"/></SwipeItem>
    <SwipeItem><img src="@/images/banner_06.jpg"/></SwipeItem>
    <SwipeItem><img src="@/images/banner_16.png"/></SwipeItem>
    </Swipe>
    </div>
    <div class="baozhang">
        <p><span>&#xe628;</span><span>100%正品</span></p>
        <p><span>&#xe628;</span><span>专家鉴定</span></p>
        <p><span>&#xe628;</span><span>假一赔三</span></p>
        <p><span>&#xe628;</span><span>极速售卖</span></p>
    </div>
    <div class="shequ">
        <p><span>&#xe60e;</span>租赁</p>
        <p><span>&#xe630;</span>社区</p>
        <p><span>&#xe7b6;</span>拿趣</p>
        <p><span>&#xe626;</span>佣金</p>
        <p><span>&#xe8e7;</span>领券</p>
        <p><span>&#xe608;</span>估计</p>
    </div>
    <div class="youhui">
        <img src="@/images/002.jpg">
    </div>
    <div class="guide">
        <!-- 潮流导购 -->
        <p><span>潮流导购</span><span>Fashion Guide</span></p>
        <!-- 获取数据 -->
        <ul  v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
        >
            <li v-for="item in list" :key="item.id"><img :src="item.img" alt="" srcset=""></li>
        </ul>
    </div>
    </div>
</template>
<script>
// import Vue from 'vue'
// import { InfiniteScroll } from 'mint-ui'
// Vue.use(InfiniteScroll)
import { Swipe, SwipeItem } from 'mint-ui'
import 'mint-ui/lib/style.css'
import { POSTS } from '@/requests/apis'
// 组件全局加载引入样式，按需加载？
// Vue.component(Swipe.name, Swipe)
// Vue.component(SwipeItem.name, SwipeItem)
export default {
  name: 'homepage1',
  data () {
    return {
      list: []
    }
  },
  components: {
    Swipe,
    SwipeItem
  },
  mounted () {
    this.$http.get(POSTS)
      .then(resp => {
        //   const list=resp.data.data)
        this.list = resp.data.data
        // console.log(this.list)
      })
  },
  methods: {
    loadMore () {
      //   console.log(this.loading)
      this.loading = true
      this.$http.get(POSTS)
        .then(resp => {
        //   const list=resp.data.data)
          this.list.concat(resp.data.data)
        // console.log(this.list)
        })
      this.loading = false
      //   setTimeout(() => {
      //     // let last = this.list[this.list.length - 1]
      //     // for (let i = 1; i <= 10; i++) {
      //     //   this.list.push(last + i);
      //     // }
      //   }, 1000
      // this.loading = true;
    }
  }
}
</script>
<style lang='scss'>
@font-face {
  font-family: 'iconfont';  /* project id 931790 */
  src: url('//at.alicdn.com/t/font_931790_d7w8aipod9b.eot');
  src: url('//at.alicdn.com/t/font_931790_d7w8aipod9b.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_931790_d7w8aipod9b.woff') format('woff'),
  url('//at.alicdn.com/t/font_931790_d7w8aipod9b.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_931790_d7w8aipod9b.svg#iconfont') format('svg');
}
.banner{
    height: 206px;
    // 高度是必须加的不然 的话轮播图出不来
}
.baozhang{
    height: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    p{
        float: left;
        flex: 1;
        justify-content: center;
        text-align: center;
        font-size: 13px;
        color: #FF5722;
        span{
            font-family: iconfont;
            margin-right: 5px;
        }
    }
}
.shequ{
    height: 70px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    p{
        height: 30px;
        line-height: 30px;
        margin-left: 20px;
        width: 100px;
        // float: left;
        // flex: 1;
        justify-content: space-around;
        text-align: center;
        background: #E0E0E0;
        margin-top: 10px;
        border-radius: 5px;
        span{
            margin-right: 6px;
            font-family: iconfont;
        }

    }
}
.youhui{
    height: 200px;
    line-height: 200px;
    width: 100%;
    padding-top: 20px;
    // vertical-align: middle;
    // align-items: center;
    img{
        display: block;
        height: 180px;
        width: 90%;
        margin: 0 auto;
    }
}
.guide{
    height: 300px;
    width: 100%;
    margin-top: 5px;
    // background: #E0E0E0;
    p{
        padding-left: 10px;
        height: 45px;
        width: 100%;
        line-height: 55px;
        span:nth-child(1){
            font-size: 20px;
        }
         span:nth-child(2){
            font-size: 15px;
            margin-left: 18px;
        }

    }
    ul{
        display: flex;
        flex-wrap: wrap;
        li{
            margin-left: 24px;
            float: left;
            // flex: 1;
            height: 200px;
            margin-top: 20px
        }
    }
}
</style>
